<template>
  <div id="app">
    <div id="container"></div>
    <div class="legend">
      <ul class="colors" id="legend-color" ref="color"></ul>
      <ul class="labels" id="legend-label" ref="label"></ul>
    </div>
    <!-- <div class="info" style="width: 300px">
      <h4>热力数据</h4>
      <p>当前热力值：<span id="val">--</span></p>
      <p>
        热力中心点坐标：
        <span id="lng-lat">--</span>
      </p>
    </div> -->
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
// import $ from 'jquery';

export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "882f1258932b53d2dd71f0e60fc44951", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Map3D"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          /*this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          }); */
          this.map = new AMap.Map("container", {
            mapStyle: "amap://styles/dark",
            pitch: 66,
            center: [116.321432, 39.916705],
            zoom: 20,
            features: ["bg", "road"],
            viewMode: "3D",
          });
          var map = this.map;
          var layer = new Loca.HexagonLayer({
            map: map,
            fitView: true,
            eventSupport: true,
          });

          axios
            .get("//a.amap.com/Loca/static/mock/yuyuantan.csv")
            .then(function (csv) {
              let data = csv.data;
              // console.log(data);
              layer.setData(data, {
                lnglat: "lnglat",
                value: "cnt",
                type: "csv",
              });

              layer.setOptions({
                unit: "meter",
                heightUnit: "meter",
                style: {
                  color: [
                    "#0553A1",
                    "#0B79B0",
                    "#10B3B0",
                    "#7CCF98",
                    "#DCE872",
                  ],
                  height: [0, 500],
                  radius: 15,
                  gap: 2,
                  opacity: 1,
                },
                selectStyle: {
                  color: "#0A0F1E",
                  opacity: 1,
                },
              });

              layer.render();
              // console.log("success");
            });

          layer.on("legendupdate", function (ev) {
            var colorLegend = ev.colorLegend;
            initLegend(colorLegend);
          });

          // layer.on("mousemove", function (ev) {
          //   updateInfo(ev);
          // });
          var that = this;
          function initLegend(colorLegend) {
            // console.log("initLegend");
            var legends = colorLegend.map(function (item) {
              return `<li class="color-item" style="background-color: ${item.color};  width: 60px;height: 8px;display: inline-block;"></li>`;
            });

            var ranges = colorLegend.map((item, index) => {
              // range 可能为小数，可以自行取整计算
              item.range[0] = Math.round(item.range[0]);
              item.range[1] = Math.round(item.range[1]);

              if (index == colorLegend.length - 1) {
                return `<li class="label-item" style="  display: inline-block;width: 60px;margin-left: -2px;font-size: 14px;">${item.range[0]}</li><li class="label-item" style="  display: inline-block;width: 60px;margin-left: -2px;font-size: 14px;">${item.range[1]}</li>`;
              }
              return `<li class="label-item"style="  display: inline-block;width: 60px;margin-left: -2px;font-size: 14px;">${item.range[0]}</li>`;
            });

            document.getElementById("legend-color").innerHTML =
              legends.join("");
            document.getElementById("legend-label").innerHTML = ranges.join("");
            // console.log(that.$refs.color);
          }

          /*  function updateInfo(ev) {
            console.log("updateInfo");
            var $val = document.getElementById("val");
            var $lngLat = document.getElementById("lng-lat");

            $val.innerText = ev.value;
            $lngLat.innerText = ev.lngLat.valueOf();
          } */
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 671px;
}
/* 图例样式 */
.legend {
  position: absolute;
  top: 20px;
  left: 20px;
}

.legend ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul .color-item {
  width: 60px;
  height: 8px;
  display: inline-block;
}

ul .label-item {
  display: inline-block;
  width: 60px;
  margin-left: -2px;
  font-size: 14px;
}

/* 信息浮框 */
.info span {
  min-width: 150px;
  max-width: 300px;
  color: #1b91ff;
  font-size: 1.2em;
}
@import url("//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
</style>
